<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        /* ================ 计数器 2020/12/19 ======================= */
        .y-inputnumber {
            width: 72px;
            height: 20px;
            display: flex;
            border: 1px solid #DCDFE6;
            border-radius: 5px;
            overflow: hidden;
        }

        .y-inputnumber:hover {
            border: 1px solid #c1c2c5;
        }

        .y-inputnumber input:first-of-type {
            width: 22px;
            height: 22px;
            border: none;
            font-size: 14px;
            color: #939598;
            background-color: #F5F7FA;
            cursor: pointer;
        }

        .y-inputnumber input:nth-child(2) {
            width: 26px;
            height: 22px;
            border-left: 1px solid #DCDFE6;
            border-right: 1px solid #DCDFE6;
            border-top: none;
            border-bottom: none;
            text-align: center;
            cursor: pointer;
        }

        .y-inputnumber input:last-of-type {
            width: 22px;
            height: 22px;
            border: none;
            font-size: 14px;
            color: #939598;
            background-color: #F5F7FA;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="g-container">
        <h3 style="width: 100%; text-align: center;padding: 10px 0px;background-color: white;color: black;">购物车</h3>
        <!-- 子路由输出 -->
        <div class="g-wrapper">

            <div class="g-main">
                <div class="g-goods">
                    <div class="g-goods-item">
                        <div>
                            <input type="checkbox" style="margin-right: 5px;height: 100%;" />
                            <img src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000178605073_1_800x800.jpg"
                                alt="1" />
                        </div>
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">科龙(Kelon) 正1.5匹</h2>
                            <p class="ellipsis">科龙(Kelon) 正1.5匹 定速 冷暖 空调挂机</p>
                            <div class="g-input-wrapper"
                                style="display: flex;justify-content:space-between;align-items: center;margin-top: 10px;">
                                <p>90￥</p>
                                <!-- 计数器组件y-inputnumber -->
                                <div class="y-inputnumber">
                                    <input type="button" value="-" />
                                    <input type="text" value="1" />
                                    <input type="button" value="+" />
                                </div>
                            </div>
                            <!-- 计数器组件y-inputnumber -->
                        </div>
                    </div>
                    <div class="g-goods-item">
                        <div>
                            <input type="checkbox" style="margin-right: 5px;height: 100%;" />
                            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070066196-000000000682437966_1_800x800.jpg"
                                alt="1" />
                        </div>
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">康宝DJ118A+QB506</h2>
                            <p class="ellipsis">康宝DJ118A+QB506 侧吸式抽油烟机灶具套装 烟灶套装 近吸式油烟机燃气灶 厨房两件套 包安装</p>
                            <div class="g-input-wrapper"
                                style="display: flex;justify-content:space-between;align-items: center;margin-top: 10px;">
                                <p>90￥</p>
                                <!-- 计数器组件y-inputnumber -->
                                <div class="y-inputnumber">
                                    <input type="button" value="-" />
                                    <input type="text" value="1" />
                                    <input type="button" value="+" />
                                </div>
                            </div>
                            <!-- 计数器组件y-inputnumber -->
                        </div>
                    </div>
                    <div class="g-goods-item">
                        <div>
                            <input type="checkbox" style="margin-right: 5px;height: 100%;" />
                            <img src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000178605073_1_800x800.jpg"
                                alt="1" />
                        </div>
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">科龙(Kelon) 正1.5匹</h2>
                            <p class="ellipsis">科龙(Kelon) 正1.5匹 定速 冷暖 空调挂机</p>
                            <div class="g-input-wrapper"
                                style="display: flex;justify-content:space-between;align-items: center;margin-top: 10px;">
                                <p>90￥</p>
                                <!-- 计数器组件y-inputnumber -->
                                <div class="y-inputnumber">
                                    <input type="button" value="-" />
                                    <input type="text" value="1" />
                                    <input type="button" value="+" />
                                </div>
                            </div>
                            <!-- 计数器组件y-inputnumber -->
                        </div>
                    </div>
                    <div class="g-goods-item">
                        <div>
                            <input type="checkbox" style="margin-right: 5px;height: 100%;" />
                            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070066196-000000000682437966_1_800x800.jpg"
                                alt="1" />
                        </div>
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">康宝DJ118A+QB506</h2>
                            <p class="ellipsis">康宝DJ118A+QB506 侧吸式抽油烟机灶具套装 烟灶套装 近吸式油烟机燃气灶 厨房两件套 包安装</p>
                            <div class="g-input-wrapper"
                                style="display: flex;justify-content:space-between;align-items: center;margin-top: 10px;">
                                <p>90￥</p>
                                <!-- 计数器组件y-inputnumber -->
                                <div class="y-inputnumber">
                                    <input type="button" value="-" />
                                    <input type="text" value="1" />
                                    <input type="button" value="+" />
                                </div>
                            </div>
                            <!-- 计数器组件y-inputnumber -->
                        </div>
                    </div>
                    <div class="g-goods-item">
                        <div>
                            <input type="checkbox" style="margin-right: 5px;height: 100%;" />
                            <img src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000178605073_1_800x800.jpg"
                                alt="1" />
                        </div>
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">科龙(Kelon) 正1.5匹</h2>
                            <p class="ellipsis">科龙(Kelon) 正1.5匹 定速 冷暖 空调挂机</p>
                            <div class="g-input-wrapper"
                                style="display: flex;justify-content:space-between;align-items: center;margin-top: 10px;">
                                <p>90￥</p>
                                <!-- 计数器组件y-inputnumber -->
                                <div class="y-inputnumber">
                                    <input type="button" value="-" />
                                    <input type="text" value="1" />
                                    <input type="button" value="+" />
                                </div>
                            </div>
                            <!-- 计数器组件y-inputnumber -->
                        </div>
                    </div>
                    <div class="g-goods-item">
                        <div>
                            <input type="checkbox" style="margin-right: 5px;height: 100%;" />
                            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070066196-000000000682437966_1_800x800.jpg"
                                alt="1" />
                        </div>
                        <div class="g-goods-right">
                            <h2 class="m-good-name ellipsis">康宝DJ118A+QB506</h2>
                            <p class="ellipsis">康宝DJ118A+QB506 侧吸式抽油烟机灶具套装 烟灶套装 近吸式油烟机燃气灶 厨房两件套 包安装</p>
                            <div class="g-input-wrapper"
                                style="display: flex;justify-content:space-between;align-items: center;margin-top: 10px;">
                                <p>90￥</p>
                                <!-- 计数器组件y-inputnumber -->
                                <div class="y-inputnumber">
                                    <input type="button" value="-" />
                                    <input type="text" value="1" />
                                    <input type="button" value="+" />
                                </div>
                            </div>
                            <!-- 计数器组件y-inputnumber -->
                        </div>
                    </div>



                </div>
            </div>
        </div>
        <!--底部tab区域-->
        <ul class="g-tab-footer">
            <li class=""> 首页</li>
            <li class=""> 分类</li>
            <li class="active"> 购物车</li>
            <li class=""> 我的</li>
        </ul>
    </div>
</body>

</html>